<template>
  <div class="home">
    <div class="main-total-box">
      <div class="main-total-item">
        <div>
          <div class="flex-align-center">
            <img src="@/assets/images/collection-icon-label.png">
            <span class="color-999 mar-l-5">今日注册</span>
          </div>
          <div class="mar-t-5">
            <count-to class="main-num" :start-val="0" :end-val="totalInfo.todayRegistNum || 0"/>
            <span class="color-999">人</span>
          </div>
        </div>
      </div>
      <!-- <div class="main-total-item">
        <div>
          <div class="flex-align-center">
            <img src="@/assets/images/collection-icon-label.png">
            <span class="color-999 mar-l-5">今日申请</span>
          </div>
          <div class="mar-t-5">
            <count-to class="main-num" :start-val="0" :end-val="totalInfo.todayOrderNum || 0"/>
            <span class="color-999">笔</span>
          </div>
        </div>
      </div> -->
      <div class="main-total-item">
        <div>
          <div class="flex-align-center">
            <img src="@/assets/images/collection-icon-label.png">
            <span class="color-999 mar-l-5">今日放款</span>
          </div>
          <div class="mar-t-5">
            <count-to class="main-num" :start-val="0" :end-val="totalInfo.todayFundOrderNum || 0"/>
            <span class="color-999">笔</span>
          </div>
        </div>
      </div>
      <div class="main-total-item">
        <div>
          <div class="flex-align-center">
            <img src="@/assets/images/collection-icon-label.png">
            <span class="color-999 mar-l-5">累计注册</span>
          </div>
          <div class="mar-t-5">
            <count-to class="main-num" :start-val="0" :end-val="totalInfo.totalRegistNum || 0"/>
            <span class="color-999">人</span>
          </div>
        </div>
      </div>
      <!-- <div class="main-total-item">
        <div>
          <div class="flex-align-center">
            <img src="@/assets/images/collection-icon-label.png">
            <span class="color-999 mar-l-5">累计申请</span>
          </div>
          <div class="mar-t-5">
            <count-to class="main-num" :start-val="0" :end-val="totalInfo.totalOrderNum || 0"/>
            <span class="color-999">笔</span>
          </div>
        </div>
      </div> -->
      <div class="main-total-item">
        <div>
          <div class="flex-align-center">
            <img src="@/assets/images/collection-icon-label.png">
            <span class="color-999 mar-l-5">累计放款单</span>
          </div>
          <div class="mar-t-5">
            <count-to class="main-num" :start-val="0" :end-val="totalInfo.totalFundNum || 0"/>
            <span class="color-999">笔</span>
          </div>
        </div>
      </div>
      <div class="main-total-item">
        <div>
          <div class="flex-align-center">
            <img src="@/assets/images/collection-icon-label.png">
            <span class="color-999 mar-l-5">今日放款金额</span>
          </div>
          <div class="mar-t-5">
            <count-to class="main-num" :start-val="0" :end-val="totalInfo.todayFundAmount || 0"/>
            <span class="color-999">元</span>
          </div>
        </div>
      </div>
      <div class="main-total-item">
        <div>
          <div class="flex-align-center">
            <img src="@/assets/images/collection-icon-label.png">
            <span class="color-999 mar-l-5">累计放款金额</span>
          </div>
          <div class="mar-t-5">
            <count-to class="main-num" :start-val="0" :end-val="totalInfo.totalFundAmount || 0"/>
            <span class="color-999">元</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="month-collection-box">
      <div class="title-box"><span>渠道成交走势图</span></div>
      <div class="month-echarts" ref="monthEcharts"></div>
    </div> -->
    <div class="left-table-box">
      <div class="title-box"><span>渠道日报</span></div>
      <el-table v-loading="loading" :data="tableList" height="300px">
        <el-table-column label="日期" align="center" prop="dayTime"/>
          <el-table-column label="注册数" align="center" prop="registNum"/>
          <el-table-column label="放款笔数" align="center" prop="fundOrderNum"/>
          <el-table-column label="放款金额" align="center" prop="fundAmount"/>
      </el-table>
      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="selectQuYeWuRiBaoPage"
      />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getChannelStat, qudaochenjiao, selectQuYeWuRiBaoPage } from "@/api/index";
export default {
  name: "CollectionStatistic",
  data() {
    return {
      totalInfo: {},
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total:0,
      list:[]
    };
  },
  mounted(){
    this.getChannelStat()
    // this.qudaochenjiao()
    this.selectQuYeWuRiBaoPage()
  },
  methods: {
    getChannelStat(){
      getChannelStat().then(response => {
        this.totalInfo = response.data;
      });
    },
    qudaochenjiao(){
      qudaochenjiao().then(response => {
        let xAxisData = []
        let seriesData1 = []
        let seriesData2 = []
        response.data.zong.forEach(item => {
          xAxisData.push(item.name.substring(5))
          seriesData1.push(item.value)
          seriesData2.push(item.value2)
        });
        this.monthEcharts(xAxisData,seriesData1,seriesData2)
      });
    },
    selectQuYeWuRiBaoPage(){
      this.loading = true;
      selectQuYeWuRiBaoPage(this.queryParams).then(response => {
        this.tableList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    monthEcharts(xAxisData,seriesData1,seriesData2) {
      var myChart = echarts.init(this.$refs.monthEcharts,'macarons');
      var option = {
        color: ['#FF9147','#1e93ff'],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              width: 1,
              color: "#00CCB1",
            },
          }
        },
        legend: {
          data: ['申请', '通过'],
          itemGap:40,
          itemHeight: 8, // 图例icon高度
          itemWidth: 15, // 图例icon宽度
          textStyle: { //图例文字的样式
            fontSize: 15
          },
        },
        xAxis: {
          type: 'category',
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            //y轴
            show: false
          },
          splitLine:{show: false},
          axisLabel:{
            color:'#999'
          },
          data: xAxisData
        },
        yAxis: {
          type: 'value',
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            //y轴
            show: false
          },
          splitLine:{
            show: true,
              lineStyle: {
              color:'#eee'
              }
          },
          axisLabel:{
            color:'#999'
          },
        },
        grid: {
          left: '0',
          right: '0',
          top: '40',
          bottom: '0', 
          containLabel: true
        },
        series: [
          {
            name: '申请',
            data: seriesData1,
            type: 'bar',
            barWidth: 20
          },
          {
            name: '通过',
            data: seriesData2,
            type: 'bar',
            barWidth: 20
          }
        ]
      };
			myChart.setOption(option);
    }
  },
};
</script>

<style scoped lang="scss">
.home{
  .title-box{
    border-bottom: 2px solid #F5F5F5;
    padding-bottom: 12px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    span{
      font-weight: bold;
      position: relative;
      font-size: 20px;
      &:after{
        content: '';
        width: 100%;
        height: 2px;
        background: #33A0FF;
        position: absolute;
        bottom: -14px;
        left: 0;
      }
    }
    .el-icon-arrow-right{
      margin-top: 2px;
    }
  }
  .main-total-box{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 -9px;
    .main-total-item{
      padding:0 9px;
      cursor: pointer;
      font-size: 16px;
      margin-bottom: 18px;
      width: 25%;
      >div{
        height: 108px;
        background: linear-gradient( 180deg, #F5F9FF 0%, #FFFFFF 100%);
        border: 2px solid #FFFFFF;
        padding: 24px;
        .main-num{
          font-size: 32px;
          font-weight: bold;
          position: relative;
          top: 2px;
        }
      }
    }
    >img{
      cursor: pointer;
      margin-left: 9px;
      
    }
  }
  .left-table-box,.today-box{
    background-color: #FFFFFF;
    padding: 24px;
    margin-top: 18px;
    .el-table{
      ::v-deep .el-table__header-wrapper tr{
        background: #F0F4FA;
      }
      ::v-deep .el-table__header-wrapper th, ::v-deep .el-table__fixed-header-wrapper th{
        background-color: transparent;
        color: #4E5766;
        border-bottom: 0;
      }
    }
  }
  .month-collection-box{
    background-color: #FFFFFF;
    padding: 24px;
    .month-echarts{
      width: 100%;
      height: 230px;
    }
  }
}
@media only screen and (max-width: 800px){
  .home .main-total-box .main-total-item{
    width: 50%;
  }
}
@media only screen and (max-width: 500px){
  .home .main-total-box .main-total-item{
    width: 100%;
  }
}
</style>
